<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="js/plugin/bootstrap3dialog/css/bootstrap-dialog.min.css">
<script type="text/javascript" src="js/plugin/bootstrap3dialog/js/bootstrap-dialog.min.js"></script>

<link rel="stylesheet" type="text/css" href="js/plugin/jqGrid/css/ui.jqgrid-bootstrap.css">
<script type="text/javascript" src="js/plugin/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/plugin/jqGrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript">
	$(function(){
		$("#jqGrid").jqGrid({
            url: './getDefinitions.do',
            contentType : 'application/json',
            styleUI : 'Bootstrap',
            datatype: "json",
            multiselect: true,
            prmNames : {search : "search"},  
            caption:'流程实例列表',
            colModel: [
                { label: 'deploymentId', name: 'deploymentId', key: true},
                { label: 'key', name: 'key' },
                { label: 'name', name: 'name',editable: true},
                {
					label: "Edit Actions",
                    name: "actions",
                    formatter: operationFmatter,
                }
            ],
			viewrecords: true,
            height: 'auto',
            width: 600,
            rowNum: 20,
            pager:"#gridPager",
        });
	}); 
	function operationFmatter(cellvalue, options, rowObject){  
		var nav = $.jgrid.getRegional(this, 'nav');
		var classes = $.jgrid.styleUI[(options.styleUI || 'jQueryUI')].fmatter;
		var common = $.jgrid.styleUI[(options.styleUI || 'jQueryUI')].common;
		var hover = "onmouseover=jQuery(this).addClass('" + common.hover +"'); onmouseout=jQuery(this).removeClass('" + common.hover +"');  ";
		var ocl = "id='jSaveButton_"+rowObject.key+"'"+"onclick=startProcess('"+rowObject.key+"') "+hover;
		var str = "<div title='"+nav.savetitle+"' style='float:left;cursor:pointer;' class='ui-pg-div ui-inline-save' "+ocl+"><span class='" + common.icon_base +" "+classes.icon_save +"'></span></div>";
		return "<div style='margin-left:8px;'>" + str + "</div>";
	}
	function startProcess(key){
		$.post("./startProcess.do",{'key':key},function(result){
			if(result.status){
				
			}
		});
	}
	$(function(){
		$("#jqGridTask").jqGrid({
            url: './getTaskList.do',
            contentType : 'application/json',
            prmNames : {search : "search"},  
            styleUI : 'Bootstrap',
            datatype: "json",
            multiselect: true,
            caption:'任务列表',
            colModel: [
                { label: 'taskId', name: 'taskId', key: true},
                { label: 'taskName', name: 'taskName' },
                { label: 'assignee', name: 'assignee',editable: true},
                {
					label: "Edit Actions",
                    name: "actions",
                    formatter: operationTaskFmatter
                }
            ],
			viewrecords: true,
            height: 'auto',
            width: 600,
            rowNum: 2,
            rowList:[10,20,30,50,100],
            pager:"#gridPagerTask",
        });
	}); 
	
	function operationTaskFmatter(cellvalue, options, rowObject){  
		debugger;
		var nav = $.jgrid.getRegional(this, 'nav');
		var classes = $.jgrid.styleUI[(options.styleUI || 'jQueryUI')].fmatter;
		var common = $.jgrid.styleUI[(options.styleUI || 'jQueryUI')].common;
		var hover = "onmouseover=jQuery(this).addClass('" + common.hover +"'); onmouseout=jQuery(this).removeClass('" + common.hover +"');  ";
		var ocl = "id='jSaveButton_"+rowObject.key+"'"+"onclick=claim('"+rowObject.taskId+"') "+hover;
		var str = "<div title='"+nav.savetitle+"' style='float:left;cursor:pointer;' class='ui-pg-div ui-inline-save' "+ocl+"><span class='" + common.icon_base +" "+classes.icon_save +"'></span></div>";
		return "<div style='margin-left:8px;'>" + str + "</div>";
	}
	function claim(taskId){
		$.post("./ajax/claimTask.do",{'taskId':taskId},function(result){
			if(!result.status){
				 BootstrapDialog.show({
					 	title: '提示！',
			            message: '分配任务失败!'
			     });
			}
		});
	}
</script>
</head>
<body>
	<div style="width:600px;margin-top: 20px;">
		<table id="jqGrid"></table>
		<div id="gridPager"></div>
	</div>
	<div style="width:600px;margin-top: 20px;">
		<table id="jqGridTask"></table>
		<div id="gridPagerTask"></div>
	</div>
</body>
</html>